<template>
  <div>
    <el-dialog v-model="props.isshow" :title="form.uid ? '编辑管理员' : '添加管理员'" @close="reset">
      <el-form :model="form" ref="ruleFormRef" :rules="rules">
        <el-form-item label="所属角色" :label-width="formLabelWidth" prop="roleid">
          <el-select v-model="form.roleid" placeholder="请选择上级菜单">
            <el-option v-for="item in store.state.role.roleList" :label="item.rolename" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="用户名称" clearable :label-width="formLabelWidth" prop="username">
          <el-input v-model="form.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" show-password clearable :label-width="formLabelWidth">
          <el-input v-model="form.password" autocomplete="off" type="password" />
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="2" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="reset">取消</el-button>
          <el-button type="primary" @click="submit"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import mit from '../../common/myMitt';
import { useStore } from "vuex";
import { reactive, ref } from "vue";
import { useraddedit, userinfo } from '../../request/api';
import { ElMessage } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";

let store = useStore();
const ruleFormRef: any = ref<FormInstance>();
let formLabelWidth = "140px";
let props = defineProps(["isshow"]);
let emit = defineEmits(["cancelDialog", 'showDialog']);
let form: any = ref({
  roleid: "",
  username: "",
  password: "",
  status: 2,
});

store.dispatch('role/getRoleList');

const rules = reactive<FormRules>({
  username: [
    { required: true, message: "请输入标题", trigger: "blur" },
    // { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
  roleid: [
    { required: true, message: "请选择上级菜单", trigger: "blur" },
  ],
});

function reset() {
  emit('cancelDialog');
  ruleFormRef.value.resetFields();
  form.value = {
    roleid: "",
    username: "",
    password: "",
    status: 2,
  }
}

function submit() {
  ruleFormRef.value.validate((val: any) => {
    if (!val) {
      return;
    }
    let url = form.value.uid ? '/useredit' : '/useradd'
    useraddedit(url, form.value).then((res: any) => {
      if (res.code == 200) {
        ElMessage.success(res.msg);
        if (form.value.uid) {
          store.dispatch('admin/getUserList');
        } else {
          store.dispatch('admin/getUserCount', true);
        }
        reset();
        return;
      }
      ElMessage.warning(res.msg);
    })
  })
}

mit.on('getInfo', (uid: any) => {
  emit("showDialog");
  userinfo({ uid }).then((res: any) => {
    if (res.code == 200) {
      form.value = { ...res.list, password: '' };
    }
  })
})
</script>

<style lang="scss" scoped></style>